<template>
    <section>
        <nav class="navbar">
            <div class="navbar-brand">
                <a class="navbar-item">
                    <img src="/static/img/buefy-logo.png" alt="Buefy" />
                </a>
                <a class="navbar-item"><b-icon pack="fab" icon="github"></b-icon></a>
                <a class="navbar-item"><b-icon pack="fab" icon="twitter"></b-icon></a>
            </div>
            
            <div class="navbar-menu">
                <div class="navbar-end">
                    <b-dropdown
                        v-model="navigation"
                        position="is-bottom-left"
                        append-to-body
                        aria-role="menu"
                    >
                        <template #trigger>
                            <a class="navbar-item" role="button">
                                <span>Menu</span>
                                <b-icon icon="menu-down"></b-icon>
                            </a>
                        </template>

                        <b-dropdown-item custom aria-role="menuitem">
                            Logged as <b>Rafael Beraldo</b>
                        </b-dropdown-item>
                        <hr class="dropdown-divider" />
                        <b-dropdown-item has-link aria-role="menuitem">
                            <a href="https://google.com" target="_blank">
                                <b-icon icon="link"></b-icon>
                                Google (link)
                            </a>
                        </b-dropdown-item>
                        <b-dropdown-item value="home" aria-role="menuitem">
                            <b-icon icon="home"></b-icon>
                            Home
                        </b-dropdown-item>
                        <b-dropdown-item value="products" aria-role="menuitem">
                            <b-icon icon="cart"></b-icon>
                            Products
                        </b-dropdown-item>
                        <b-dropdown-item value="blog" disabled aria-role="menuitem">
                            <b-icon icon="book-open"></b-icon>
                            Blog
                        </b-dropdown-item>
                        <hr class="dropdown-divider" aria-role="menuitem" />
                        <b-dropdown-item value="settings">
                            <b-icon icon="gear"></b-icon>
                            Settings
                        </b-dropdown-item>
                        <b-dropdown-item value="logout" aria-role="menuitem">
                            <b-icon icon="logout"></b-icon>
                            Logout
                        </b-dropdown-item>
                    </b-dropdown>
                </div>
            </div>
        </nav>
    </section>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { BDropdown, BDropdownItem, BIcon } from "buefy";

export default defineComponent({
    components: {
        BDropdown,
        BDropdownItem,
        BIcon,
    },
    data() {
        return {
            navigation: "home",
        };
    },
});
</script>
